<%@ page import="com.hall.utils.UserSession" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://www.codecoord.com" %>
<%@ taglib prefix="fmt" uri="http://www.codecoord.com/fmt" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>会诊直播动态</title>
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/static/css/live_meeting.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/jquery/jquerymin.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/tab.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/dist/css/layui.css">
    <script src="${pageContext.request.contextPath}/static/layui/dist/layui.js"></script>
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap/css/bootstrap.css">
</head>
<style>
    h5 {
        line-height: 1.8;
        text-align: center;
    }
    .aui-footer-fixed{
        display: none;
    }
    #notlive {
        display: none;
        position: absolute;
        left: 50%;
        top: 35%;
        transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */
        -webkit-transform: translate(-50%, -50%);

    }

    .aui-scrollView {
        z-index: 50;
        margin-bottom: 46px;
    }
    #header{

    }
    .aui-flexView{

    }
    #img_buttom{
        width: 100%;height: 100%;
        background-color: black;
        position: relative;
        display: none;
        overflow-y:auto;
    }

    #img_meet{
    width: 100%;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin-top: 5px;
    }
    #title{
        margin-top: 0;
    }
    h2{
        margin-top: 10px;
    }
    h3{
        margin-top: 10px;
    }
    #img_button_i{
        color: white;
        font-size: 14px;
        margin-top: 5px;
        position: relative;
        margin-right: 8px;
        float: right;
        border: 1px solid #ffffff;
        padding: 1px 6px;
        border-radius: 18px;
        line-height: 1.4;
    }
</style>
<body>
<div id="img_buttom">
    <span id="img_button_i" onclick="closeImg()">关闭</span>
    <img id="img_meet" src="${pageContext.request.contextPath}/resource/images/100.jpg" onclick="closeImg()" alt="">
</div>
<div id="header" style="height: 50px">
    <nav id="navbar-default" class="navbar navbar-default top-nabar" role="navigation"
         style="overflow:hidden;position:fixed;top:0;width:100%;z-index:2000;margin-bottom: 10px;height: 50px;border: 0">
        <div class="row" style="background-color: #71BD71;">
            <div class="container-fluid" id="fluid">
                <div class="col-lg-1 col-md-1 col-xs-1 col-sm-1" style=";padding-left: 6px;">
                    <a class="navbar-brand" href="javascript:history.back(-1)"
                       style="padding-left: 3px;">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    </a>
                </div>
            </div>
        </div>
    </nav>
    <br><br>
</div>
<section class="aui-flexView" data-ydui-tab>
    <header class="aui-navBar aui-navBar-fixed">
        <ul id="table0" class="tab-nav b-line">
            <li id="nowLive" class="tab-nav-item tab-active"><a href="javascript:;"><span>正在直播</span></a></li>
            <li id="trailerLive" class="tab-nav-item"><a href="javascript:;"><span>直播预告</span></a></li>
        </ul>
    </header>

    <div id="notlive" style="text-align: center;margin-top: 40px">
        <img src="${pageContext.request.contextPath}/resource/images/notlive.png" width="220" height="220"
             alt="">
        <h5>--暂无进行中的直播--</h5>
    </div>
    <section class="aui-scrollView">
        <div class="tab-panel">
            <%--直播中列表--%>
            <div id="table" class="tab-panel-item tab-active">
                <c:forEach items="${listMeetNow}" var="appointment0" varStatus="status">
                    <a href="javascript:;" type="" about="" class="aui-flex b-line" style="{text-decoration: none;}">
                        <div class="aui-film-img"><img src="${pageContext.request.contextPath}/resource/images/100.jpg"
                                                       alt=""></div>
                        <div class="aui-flex-box"><h1 id="title">${appointment0.title} <em
                                style="color: #fda54c;border: 1px solid #fda54c;">直播进行中</em></h1>
                            <h2>会议时间:<em><fmt:formatDate
                                    value="${appointment0.applyTime}"
                                    pattern="yyyy-MM-dd HH:mm:ss"/>-${appointment0.applyEndTime}</em></h2>
                            <h3>会议发起人:${appointment0.doctorName}</h3>
                                <%--时间控制--%>
                            <input id="timestart" type="text" style="display: none" value="<fmt:formatDate
                                value="${appointment0.applyTime}" pattern="yyyy-MM-dd HH:mm:ss"/>">
                            <input id="timeend" type="text" style="display: none" value="<fmt:formatDate
                                value="${appointment0.applyTime}" pattern="yyyy-MM-dd HH:mm:ss"/>"> <%--开始时间--%>
                            <h3 style="color:#fda54c">参会专家:${appointment0.appointUser}</h3><span
                                    class="b-line"><em>远程诊疗</em>&nbsp;<em>多科会诊</em>&nbsp;<em>口碑专家</em></span></div>
                        <div class="aui-film-button">
                            <button id="but1" onclick="witch('${appointment0.setLive}')"
                                    style="margin-bottom:8px ">观看直播
                            </button>
                            <input id="qr_url" type="text" value="${appointment0.setLive}" style="display: none">
                            <button id="but2" onclick="share('${appointment0.setLive}')">分享直播</button>
                        </div>
                    </a>
                </c:forEach>
            </div>
            <%--未开播列表--%>
            <div id="table3" class="tab-panel-item">
                <c:forEach items="${listMeetAfter}" var="appointment0" varStatus="status">
                    <a href="javascript:;" type="" about="" class="aui-flex b-line" style="{text-decoration: none;}">
                        <div class="aui-film-img"><img src="${pageContext.request.contextPath}/resource/images/100.jpg"
                                                       alt=""></div>
                        <div class="aui-flex-box"><h1 id="title">${appointment0.title} <em>直播未开始</em></h1>
                            <h2>会议时间:<em><fmt:formatDate
                                    value="${appointment0.applyTime}"
                                    pattern="yyyy-MM-dd HH:mm:ss"/>-${appointment0.applyEndTime}</em></h2>
                            <h3>会议发起人:${appointment0.doctorName}</h3>
                                <%--时间控制--%>
                            <input id="timestart" type="text" style="display: none" value="<fmt:formatDate
                                value="${appointment0.applyTime}" pattern="yyyy-MM-dd HH:mm:ss"/>">
                            <input id="timeend" type="text" style="display: none" value="<fmt:formatDate
                                value="${appointment0.applyTime}" pattern="yyyy-MM-dd HH:mm:ss"/>"> <%--开始时间--%>
                            <h3 style="color:#fda54c">参会专家:${appointment0.appointUser}</h3><span
                                    class="b-line"><em>远程诊疗</em>&nbsp;<em>多科会诊</em>&nbsp;<em>口碑专家</em></span></div>
                        <div class="aui-film-button">
                           <%-- <button id="but3" style="margin-bottom:8px">预约直播</button>--%>
                            <input id="qr_url-2" type="text" value="${appointment0.setLive}" style="display: none">
                            <button id="but4" onclick="share('${appointment0.setLive}',this)">分享直播</button>
                        </div>
                    </a>
                </c:forEach>
            </div>

        </div>
        <div style="height:55px;"></div>
    </section>

    <%--显示二维码--%>
    <div class="social-share1" style="text-align:center; display:none;" id="shareDiv">
        <p style="margin-top: 20px">使用二维码或点击复制链接分享哦</p>
        <img id="testimg" style="float:right;cursor:pointer" alt="" width="200" height="200"/>
        <input id="qc_input" type="text" readonly="readonly">
        <div class="alert alert-success" role="alert"
             style="width: 100px;position: absolute;top: 90px;left: 85px;display: none">复制成功
        </div>
        <div class="layui-btn-container">
            <button type="button" id="copy_button" class="layui-btn layui-btn-warm layui-btn-radius"
                    style="margin-right: 0" onclick="copyy()">复制链接
            </button>
        </div>
    </div>


    <footer class="aui-footer aui-footer-fixed">

        <a href="/boke/index.jsp" class="aui-tabBar-item " style="text-decoration:none;">
            <span class="aui-tabBar-item-icon"><i class="icon icon-loan"></i></span>
            <span class="aui-tabBar-item-text">首页</span></a>

        <a href="/bokehall/hall/allHall" class="aui-tabBar-item aui-tabBar-item-active">
            <span class="aui-tabBar-item-icon"><i class="icon icon-credit"></i></span>
            <span class="aui-tabBar-item-text">会诊</span></a>

        <a href="/boke/msg/chatfriend.jsp" class="aui-tabBar-item ">
            <span class="aui-tabBar-item-icon"><i class="icon icon-ions"></i></span>
            <span class="aui-tabBar-item-text">消息</span></a>

        <a href="/boke/me.jsp" class="aui-tabBar-item "><span
                class="aui-tabBar-item-icon"><i class="icon icon-mine"></i></span>
            <span
                    class="aui-tabBar-item-text">我的
        </span></a>
    </footer>
</section>
<script>
    $(document).ready(function () {
        document.body.parentNode.style.overflowY = "hidden";
        hideimg();
        $("#header").hide();
    });

    /*分享直播*/
    function share(obj, i) {
        let invitecode = '${loginUser.inviteCode}';
        var c = 'http://gaiwo.belovedlive.com:8098/bokehall/hall/meetLiveShow';
        //-------↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓此二维码api链接后期若失效可以修改(let o为二维码生成的路径)
        //let o = "https://api.isoyu.com/qr/?m=0&e=L&p=10&url=" + c + '?invitecode=' + invitecode + "&liveId=" + obj; //本地跳转微赞
        let o = "https://api.isoyu.com/qr/?m=0&e=L&p=10&url=" + obj; //直接跳转微赞
        if (obj == null || obj.length < 4) {
            layer.msg('暂无直播链接');
            return false;
        }
        //设置分享框的链接
        $("#qc_input").val(c + '?invitecode=' + invitecode + "&liveId=" + obj);//本地跳转链接
        $("#qc_input").val(obj);//直接跳转链接
        $("#testimg").attr("src", o); //o为二维码图片的路径
        layer.open({
            type: 1,
            skin: 'layershow', //样式类名
            title: false,
            offset: 'auto',
            area: ['270px', '360px'], //宽高
            closeBtn: 1, //不显示关闭按钮
            shade: 0,
            anim: 2,
            shadeClose: false, //开启遮罩关闭
            content: $("#shareDiv")
        });
    }

    function copyy() {
        //获取input对象
        let obj = document.getElementById("qc_input");
        //选择当前对象
        obj.select();
        try {
            //进行复制到剪切板
            if (document.execCommand("Copy", "false", null)) {
                //如果复制成功
                $(".alert-success").show(0).delay(1200).hide(0);
            } else {
                //如果复制失败
                alert("复制失败！请手动复制");
            }
        } catch (err) {
            //如果报错
            alert("复制错误！请手动复制")
        }
    }

    //直接观看的路径
    let livecontroller = '${pageContext.request.contextPath}' + '/hall/meetLiveShow';/*点击观看需要处理的控制器路径*/
    function witch(obj) {           /*控制器路径*/
        if (obj == null || obj.length < 4) {
            layer.msg('暂无直播链接');
            return false;
        }
        //window.location.href = livecontroller + '?invitecode=&liveId=' + obj; //转到本地控制器跳转的
        window.location.href = obj; //直接跳转微赞
    }

    $('li').click(function () {
        let number = $('#table').children().length > 0;
        let number2 = $('#table3').children().length > 0;
        if ($(this).attr('id') == 'trailerLive') {
            if (!number2) {
                $("#notlive").show();
            } else {
                $("#notlive").hide();
            }
            $('h5').text('--暂无待开始的直播--')
        } else {
            hideimg();
            $('h5').text('--暂无进行中的直播--')
        }
    })

    function hideimg() {
        let number = $('#table').children().length > 0;
        if (!number) {
            $("#notlive").show();
        } else {
            $("#notlive").hide();
        }
    }
    $('.aui-film-img').click(function () {
        $('#header').hide();
        $('.aui-flexView').hide()
        $('#img_buttom').show();
    })
   function closeImg(){ //关闭图片
        $("#img_buttom").hide();
       $('.aui-flexView').show()
   }
</script>
</body>
</html>
